import React, {FC, useState} from "react";
import styles from "./index.less";
import {useIntl, getLocale, getAllLocales, setLocale} from "umi"

import {
  OverlayTrigger,
  Navbar,
  Nav,
  NavDropdown,
  Container,
  Form,
  FormControl,
  Button,
  Image,
  Popover,
  Table
} from "react-bootstrap";

const UserAvatarPopover = (
  <Popover id="popover-basic">
    <Popover.Body className="p-0">
      <Table borderless hover size="sm" className="p-0 m-0">
        <tbody>
        <tr>
          <td>
            <div className="p-2">
              PROFILE
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div className="p-2">
              MY POSTS
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div className="p-2">
              SIGN OUT
            </div>
          </td>
        </tr>
        </tbody>
      </Table>
    </Popover.Body>
  </Popover>
);


const FHeader: FC = () => {
    const {formatMessage} = useIntl()

    // console.log("getLocale ===> ", getLocale())
    // console.log("getAllLocales ===> ", getAllLocales())

    const [showDropdown, setShowDropdown] = useState(false)

    const toggleDropdown = () => {
      setShowDropdown(!showDropdown)
    }

    const setLan = () => {
      const locale = getLocale()
      if (locale === "zh-CN") {
        setLocale("en-US")
      } else {
        setLocale("zh-CN")
      }
    }

    return (
      <nav className={styles["header-wrapper"]}>
        <Container fluid className="mx-auto">
          <Navbar className="d-flex justify-content-between align-items-center">
            <Nav>
              <Navbar.Brand className="d-flex align-items-center">
                <svg className="me-1 d-block d-lg-none" onClick={toggleDropdown} style={{cursor: 'pointer'}}
                     xmlns="http://www.w3.org/2000/svg" width="30" height="30"
                     fill="currentColor"
                     viewBox="0 0 16 16">
                  <path fillRule="evenodd"
                        d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                </svg>

                <Image
                  src={require('@/assets/logo.png')}
                  width="30"
                  height="30"
                  className="rounded-circle me-2"
                />
                <Image
                  className="d-none d-sm-block"
                  src={require('@/assets/logo_text.png')}
                  width="85"
                />
              </Navbar.Brand>

              <Nav.Link className="d-none d-lg-block">推荐</Nav.Link>
              <NavDropdown className="d-none d-lg-block" title="技术分享" id="basic-nav-dropdown">
                <NavDropdown.Item>
                  博客
                </NavDropdown.Item>
                <NavDropdown.Item>
                  学习笔记
                </NavDropdown.Item>
                <NavDropdown.Item>
                  问答
                </NavDropdown.Item>
              </NavDropdown>
              <Nav.Link className="d-none d-lg-block">生活分享</Nav.Link>
              <NavDropdown className="d-none d-lg-block" title="关于博主" id="basic-nav-dropdown">
                <NavDropdown.Item>
                  项目展示
                </NavDropdown.Item>
                <NavDropdown.Item>
                  个人简历
                </NavDropdown.Item>
              </NavDropdown>

              {/*{formatMessage({id: 'layout.header.userProfile.profile'})}*/}
            </Nav>


            <div className="d-flex">
              <Form className="d-flex me-2">
                <FormControl
                  type="search"
                  placeholder="Search"
                  className="me-2"
                  aria-label="Search"
                />
                <Button variant="outline-primary">Search</Button>
              </Form>

              <OverlayTrigger trigger="click" placement="bottom-end" overlay={UserAvatarPopover}>
                <Image className="aspect-fill me-2" roundedCircle width="35" height="35"
                       src={require('@/assets/img/6.jpeg')}/>
              </OverlayTrigger>
            </div>
          </Navbar>

          <div className={styles['nav-dropdown'] + ' d-block d-lg-none ' + (showDropdown ? styles['show'] : '')}>
            <div className={styles['nav-dropdown-inner']}>
              <Navbar className="p-0 m-0">
                <Nav defaultActiveKey="/home" className="flex-column">
                  <Nav.Link className={styles['nav-dropdown-item']} href="/home">Active</Nav.Link>
                  <Nav.Link className={styles['nav-dropdown-item']} eventKey="link-1">Link</Nav.Link>
                  <Nav.Link className={styles['nav-dropdown-item']} eventKey="link-2">Link</Nav.Link>
                  <Nav.Link className={styles['nav-dropdown-item']} eventKey="disabled" disabled>
                    Disabled
                  </Nav.Link>
                </Nav>
              </Navbar>
            </div>
          </div>
        </Container>
      </nav>
    );
  }
;

export default FHeader;
